<template>
  <div class='vw-result bg-repeat-no bg-size-100 bg-position-l-c ' >
    <main class='w-per-100 h-per-100 bg-repeat p-r'>
      <div class='w-per-100 h-per-100 bg-repeat-no p-a-xl-yt f-s-c f-column' :style='{backgroundImage: `url(${background})`}'>
        <img v-if='!!shareUrl' class="w-per-100 d-b" :src='background' />
      </div>
      <img v-if='!!link&&isShowBar&&!!!shareUrl' :src="link" alt="" class='p-a-xl-yb m-l-10 m-b-10 b-ccc b-w-2 w-200 z-100'>
    </main>
    <footer v-if='isShowBar' class='p-f w-per-100 d-f justify-c align-e'>
      <span class="f-s-c m-r-30 active-skew" @click='onSave'>
        <img src="../image/btn_share.png" alt="" class='h-80 active-skew animated fadeInLeft'>
      </span>
      <span class="f-s-c active-skew" @click='onAccept'>
        <img src="../image/btn_accept.png" alt="" class='h-130 active-skew animated fadeInRight'>
      </span>
    </footer>
    <!-- <h5 class='p-a-xl-yb w-per-100 h-80 f-c c-fff f-s-32 f-w-600'>点击图片长按分享</h5> -->
    <a download='新年行大吉.png' id='down-zt' hidden src="" class='p-f' alt=""></a>
  </div>
</template>

<script>
import hc from 'html2canvas';
import QR from 'qrcode';
import mixin from './mixin';
import { Dialog } from 'vant';

export default {
  mixins: [mixin],
  data() {
    return {
      isShowBar: false,
      link: '',
      shareUrl: ''
    }
  },
  computed: {
    background() {
      if (!!this.shareUrl) return this.shareUrl;
      const type = String(this.$route.params.type);
      if (type==='1') return require('../image/result/res_1.png');
      if (type==='2') return require('../image/result/res_2.png');
      if (type==='3') return require('../image/result/res_3.png');
      if (type==='4') return require('../image/result/res_4.png');
    }
  },
  mounted() {
    setTimeout(()=>{
      this.isShowBar = true;
    },250);
    this.onGenerateQR();
  },
  methods: {
    async onSave() {
      // Dialog.alert('长按图片保存');
      Dialog.alert({
        title: '提示',
        message: '长按图片保存',
        theme: 'round-button',
      }).then(() => {
        // on close
      });
      return ;
      await hc(document.querySelector('.vw-result >main'), {
        dpi: window.devicePixelRatio * 2,
        scale: 2,
        width: this.width,
        height: this.height,
        useCORS: true,
        backgroundColor: '#fff'
      })
      .then(async c=>{
          const img=new Image();
          img.src = c.toDataURL("image/png");
          
          const bytes = window.atob(img.src.split(',')[1]);

          const ab = new ArrayBuffer(bytes.length);
          const ia = new Uint8Array(ab);
          for(let i = 0; i < bytes.length; i++){
            ia[i] = bytes.charCodeAt(i); //这里有点疑惑，ia是怎么改变ab的？注：①
          }

          const blob  = new Blob([ab], {type: 'image/png'});

          const blobUrl = window.URL.createObjectURL(blob);

          document.querySelector('#down-zt').setAttribute('href', blobUrl);
          document.querySelector('#down-zt').click();

          window.URL.revokeObjectURL(blobUrl);
          
        })
        .catch(()=>{
        });
        
    },
    onAccept() {
      window.location.href=window.config.share
    },
    async onGenerateImg() {
      await hc(document.querySelector('.vw-result >main'), {
        dpi: window.devicePixelRatio * 2,
        scale: 2,
        width: this.width,
        height: this.height,
        useCORS: true,
        // backgroundColor: '#fff'
      })
      .then(async c=>{
          // const img=new Image();
          // img.src = c.toDataURL("image/png");
          
          // const bytes = window.atob(img.src.split(',')[1]);

          // const ab = new ArrayBuffer(bytes.length);
          // const ia = new Uint8Array(ab);
          // for(let i = 0; i < bytes.length; i++){
          //   ia[i] = bytes.charCodeAt(i); //这里有点疑惑，ia是怎么改变ab的？注：①
          // }

          // const blob  = new Blob([ab], {type: 'image/png'});

          // const blobUrl = window.URL.createObjectURL(blob);
          // console.log(blobUrl);
          this.shareUrl = c.toDataURL('image/png');
          // this.isShowBar = false;
          // document.querySelector('#down-zt').setAttribute('href', blobUrl);
          // document.querySelector('#down-zt').click();

          // window.URL.revokeObjectURL(blobUrl);
          
        })
        .catch(()=>{
        });
    },
    onGenerateQR() {
      QR.toDataURL(window.location.href, (err,url)=>{
        this.link=url;
        setTimeout(()=>{
          this.onGenerateImg()
        },300)
      });
      // var qrcode = new QR("test", {
      //     text: "http://jindo.dev.naver.com/collie",
      //     width: 128,
      //     height: 128,
      //     colorDark : "#000000",
      //     colorLight : "#ffffff",
      //     // correctLevel : QR.CorrectLevel.H
      // });
      // console.log(QR,qrcode)
    }
  }
}
</script>

<style lang='stylus'>
.vw-result
  >main
    background-size 15px 15px
    // :style="{backgroundImage: `url(${require('../image/bg_rect.png')})`}"
    background-image url('../image/bg_rect.png')
    >div
      background-size contain
      background-position center top
      margin-left -4px
      // >img
      //   height 
        // max-width 100%
        // max-height 100%
  footer
    bottom 280px
  >h5
    background: rgba(0,0,0,.3)
//   background-image: url('../image/result/')

</style>